<template>
  <drawer title="调整学生" @close="close">
    <template #content>
      <div class="select-top">
        <div class="select-top-left">
          <div class="big-text">MAC: HL:73:DA:9F:61:0B</div>
          <!--          <div class="sub-text"></div>-->
        </div>
        <div class="select-top-right">
          <n-input class="search-input" placeholder="请输入学生姓名">
            <template #prefix>
              <n-icon>
                <SearchSharp />
              </n-icon>
            </template>
          </n-input>
        </div>
      </div>
      <n-scrollbar style="height: calc(100% - 102px)">
        <div class="select-wrap">
          <div
            class="student-item"
            :class="selectedKey === item.id ? 'active' : ''"
            v-for="item in getStudentData"
            :key="item.id"
            @click="selectTap(item)"
          >
            <avatar class="avatar" :size="72" :src="item.pic" :write-status="true" :is-writing="false" />
            <div class="student-desc">
              <div class="student-name">{{ item.name }}</div>
              <div class="student-label"
                >{{ getEnumDataLabel('gender', item.gender) }} | {{ item.age }}岁 |
                {{ item.learningStageName }}</div
              >
            </div>
          </div>
        </div>
      </n-scrollbar>
    </template>
    <template #footer>
      <div class="selected" v-if="selectedObj"
        >已选择：{{ selectedObj.name }}({{ getEnumDataLabel('gender', selectedObj.gender) }},{{
          selectedObj.age
        }}岁,{{ selectedObj.learningStageName }})</div
      >
      <n-button size="large" @click="close">取消</n-button>
      <n-button type="primary" size="large" @click="confirm">确认</n-button>
    </template>
  </drawer>
</template>

<script setup lang="ts">
  import { computed, reactive, ref } from 'vue';
  import { SearchSharp, CloseOutline } from '@vicons/ionicons5';
  import { dialogParams } from '@/hooks/useDataTable';
  import { useCourse } from '@/store/modules/course';
  import { useIndexedDB } from '@/store/modules/indexedDB';
  import { getEnumDataLabel } from '@/enums/dataEnum';

  import { storage } from '@/utils/Storage';
  import {actionSqliteData} from "@/utils/ipcRenderer";

  type Props = {
    penObj: any;
    dialogState: dialogParams;
  };

  const props = withDefaults(defineProps<Props>(), {
    dialogState: () => {
      return {
        visible: false,
      };
    },
  });
  const { getStudentData, getCoursePenData } = useCourse();
  const { setStudentAndMacDB, setPointDB } = useIndexedDB();
  const dialogVisible = computed(() => {
    return props.dialogState.visible;
  });

  const selectedKey = ref('');
  const selectedObj = ref<any>(null);

  function selectTap(item) {
    selectedKey.value = item.id;
    selectedObj.value = item;
  }
  const emits = defineEmits(['close', 'change']);
  function close() {
    emits('close');
  }
  async function confirm() {
    if (selectedKey.value === '') return;
    const data = reactive(useCourse().getCoursePenData);
    const findIndex = data.findIndex((i) => i.mac === props.penObj.mac);
    if (findIndex > -1) {
      if (data[findIndex].studentInfo?.id && data[findIndex].studentInfo?.id !== selectedObj.value.id) {
        // 如果是换绑新的学生，清空学生数据
        const res: any = await actionSqliteData({
          action: 'del-of-student',
          search_params: {
            studentId: data[findIndex].studentInfo?.id,
          }
        })
        res.all_list.forEach(item => {
          const pointKey = `${item.courseId}-${item.mac}-${item.studentId}-${item.regionId}-${item.regionIndex}`
          useIndexedDB().removePointDB(pointKey)
        })
      }
      data[findIndex].studentInfo = selectedObj.value;
      data[findIndex].waitWriteData = []
    }
    useCourse().setCoursePenData(data);
    emits('change', selectedObj.value);
  }
</script>

<style scoped lang="less">
  .selected {
    font-size: 21px;
    position: absolute;
    left: 44px;
    line-height: 32px;
    top: 50%;
    margin-top: -16px;
  }
  .select-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    .select-top-left {
      .big-text {
        font-size: 27px;
        color: #1e232b;
        line-height: 40px;
      }
      .sub-text {
        color: #9ba2aa;
        font-size: 21px;
        line-height: 32px;
      }
    }
    .select-top-right {
      width: 540px;
    }
    .search-input {
      border-radius: 9px;
      height: 48px;
    }
  }
  .select-wrap {
    display: flex;
    flex-wrap: wrap;
    .student-item {
      width: 355px;
      height: 108px;
      background-color: #f6f8f9;
      border-radius: 12px;
      display: flex;
      align-items: center;
      padding: 18px 24px;
      cursor: pointer;
      margin-bottom: 18px;
      margin-right: 18px;
      position: relative;
      &:nth-child(5n + 5) {
        margin-right: 0;
      }
      &.active {
        background-color: #fff;
        &::before {
          content: '';
          position: absolute;
          top: 0;
          right: 0;
          left: 0;
          bottom: 0;
          border: 2px solid #eb6100;
          border-radius: 14px;
        }
        &::after {
          content: '';
          position: absolute;
          right: 0;
          top: 0;
          width: 36px;
          height: 36px;
          background: url('@/assets/img/selected.png') center center no-repeat;
          background-size: 36px 36px;
        }
      }
      .student-desc {
        flex: 1;
        margin: 0 16px;
      }
      .student-name {
        font-size: 24px;
      }
      .student-label {
        font-size: 21px;
        color: #9ba2aa;
      }
    }
  }
</style>
